<template>
	<view class="bg-white">
		<view class="header">
			<view class="status_bar" :style="{height:height+'px'}"></view>
			<view class="w100" style="height: 330rpx;">
				<view class="flex plr-36 ptb-20" v-if="0">
					<view @click="toCity" class="flex_l white size-34 mr-30">
						<view class="img-map">
							<image src="../static/map.png" mode=""></image>
						</view>
						<text class="ml-10 size-26">{{city}}</text>
					</view>
					<!-- //#ifdef MP-WEIXIN -->
					<!-- <u-search @click="toSearch" v-model="search" color="#FF9900" disabled :show-action="true" action-text="搜索" :animation="true"></u-search> -->
					<!-- //#endif -->
				</view>
			</view>
			<view style="margin-top: -215rpx;" class="mlr-36">
				<u-swiper name="image" :height="300" :border-radius="10" :title="false" :list="banner"
					@click="swiperChange"></u-swiper>
			</view>
		</view>
		<u-grid :col="4" :border="false" class="mtb-10">
			<u-grid-item v-for="(item, index) in cat" @click="toCategory(item)" :key="index">
				<image :src="item.icon" style="width: 60rpx;height: 60rpx;border-radius: 50%;" mode="aspectFill">
				</image>
				<view class="mt-15 size-24">{{item.title}}</view>
			</u-grid-item>
		</u-grid>
		<uni-notice-bar scrollable="true" showIcon="true" single="true" :text="notice.title"
			backgroundColor="transparent" color="#de8c17" v-if="notice" @click="toNotice(notice)"></uni-notice-bar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
    import Auth from '@/libs/permission'
	export default {
		props: ['type'],
		data() {
			return {
				search: '请搜索商品或商家',
				notice: {},
				banner: [],
				cat: []
			};
		},
		computed: {
			...mapState(["city", "height"])
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.$http('/api/index/init', {
					type: this.type
				}).then(data => {
					this.notice = data.notice
					this.banner = data.banner
					this.cat = data.category
					uni.setStorageSync('platform_phone', data.platform_phone);
				})
			},
			swiperChange(events) {
				if (this.banner[events].url) {
					uni.navigateTo({
						url: this.banner[events].url
					})
				}
			},
			toCity() {
				uni.navigateTo({
					url: '/pages/home/city'
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/service/search'
				})
			},
            async toCategory(item) {
                let that = this;
				if (item.url) {
					let url = (item.url ? item.url : '/pages/home/store-list') +
						`?cat_id=${item.id}&cat_name=${item.title}&img=${item.image}`;
					uni.navigateTo({
						url: url
					})
					/*
					if (item.title === '上门回收') {
                        let authState = await new Auth('userLocation').check();
                        authState && that.$map.getRegeo({
                            success: (data) => {
                                that.$store.commit('getCity', data[0].regeocodeData.addressComponent.city)
                                that.$store.commit('getSite', data[0].latitude + ',' + data[0].longitude)
                                uni.navigateTo({
                                    url: url
                                })
                            }
                        }, function() {
                            uni.showToast({
                                title: "定位获取失败，请检测是否开启定位",
                                icon: 'none'
                            })
                        });
					} else {
						uni.navigateTo({
							url: url
						})
					}
					*/
				} else {
					uni.showModal({
						title: '提示',
						content: '该服务暂未开通',
						showCancel: false
					})
				}
			},
			toNotice(data) {
				uni.navigateTo({
					url: `/pages/my/set/detail?id=` + data.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: url(../static/header-bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.img-map {
		height: 40rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>